<!--
author:        hejy <silentmanager@163.com>
date:          2024-11-01 00:09:19
component:     index
Copyright © YourCompanyName All rights reserved
公海
-->
<template>
  <!-- 搜索表单 -->
  <el-card>
    <FormComponent :config="formConfig" ref="formRef">
      <template #submit>
        <div style="margin-left: 36px">
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
          <el-button type="success" v-hasPermi="['crm:customer:import']" @click="handleImport"
            >导入客户</el-button
          >
          <el-button
            type="success"
            v-hasPermi="['crm:customer:pool:update']"
            @click="handleRecycling"
            >导入到待开发</el-button
          >
          <el-button
            type="success"
            v-hasPermi="['crm:customer:pool:update']"
            @click="handleFilteringImports"
            :loading="filterImportLoading"
            >筛选导入到待开发</el-button
          >
        </div>
      </template>
    </FormComponent>
  </el-card>
  <!-- 表格 -->
  <el-card style="margin-top: 24px">
    <el-alert :title="'已选择 ' + selectedCount + ' 项'" type="success" />
    <el-table
      @selection-change="handleSelectionChange"
      :row-key="getRowKey"
      :data="list"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true" />
      <el-table-column label="序号" width="80">
        <template #default="scope">
          {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
        </template>
      </el-table-column>
      <el-table-column label="客户名称" prop="name" />
      <el-table-column label="客户类型" prop="level" />
      <el-table-column label="性别" prop="sex" />
      <el-table-column label="客户手机号" prop="mobile">
        <template #default="{ row }">
          <span>{{ formatPhoneNumber(row.mobile) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="detailAddress" />
      <el-table-column label="创建时间" prop="createTime" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-card>
  <!-- 用户导入对话框 -->
  <HighSeasImportForm ref="importFormRef" @success="getList" />
</template>
<script lang="ts" setup>
import HighSeasImportForm from './components/highSeasImportForm.vue'
import { poolPageCustomer, putPoolAll, putPoolCustomer, UserDetails } from '@/api/customer'
import FormComponent from '@/components/FormComponent/index.vue'
import { CustomerTypeOptions } from '@/mock'
import { formatPhoneNumber } from '@/utils'
const message = useMessage() // 消息弹窗

// ----------------------------- 导入 -----------------------------
/** 用户导入 */
const importFormRef = ref()
const handleImport = () => {
  importFormRef.value.open()
}
// ----------------------------- 表格 -----------------------------
const loading = ref(true) // 列表的加载中
const filterImportLoading = ref(false)
const total = ref(0) // 列表的总页数
const list = ref<UserDetails[]>([]) // 列表的数据
// 定义选中项数量的状态
const selectId = ref<number[]>([])
const selectedCount = ref(0)

// 分页
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await poolPageCustomer({ ...queryParams, ...formRef.value?.formData, pool: true })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const handleRecycling = async () => {
  try {
    if (selectedCount.value === 0) {
      message.warning('请至少选择一位客户！')
      return
    }
    await message.confirm('是否将选择客户导入到待开发？')
    await putPoolCustomer(selectId.value.join(','))
    message.success('导入到待开发成功')
    getList()
  } catch (e) {
    console.error(e)
  }
}

const handleFilteringImports = async () => {
  try {
    await message.confirm('是否将筛选客户导入到待开发？')
    filterImportLoading.value = true
    await putPoolAll({ ...formRef.value?.formData, pool: true })
    message.success('导入到待开发成功')
    filterImportLoading.value = false
    getList()
  } catch (e) {
    console.error(e)
    filterImportLoading.value = false
  }
}

const handleSelectionChange = (selection: any[]) => {
  selectId.value = selection.map((item) => item.id)
  selectedCount.value = selection.length // 更新选中项的数量
}

const getRowKey = (row: any) => {
  return row.id
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  formRef.value?.handleReset()
  handleQuery()
}
/** 初始化 */
onMounted(() => {
  getList()
})

const formRef = ref<InstanceType<typeof FormComponent>>()
const formConfig = [
  {
    label: '客户名称',
    prop: 'name',
    type: 'input',
    options: { placeholder: '请输入客户名称' }
  },
  {
    label: '客户手机',
    prop: 'mobile',
    type: 'input',
    options: { placeholder: '请输入客户手机' }
  },
  {
    label: '客户类型',
    prop: 'level',
    type: 'select',
    options: {
      style: 'width: 240px',
      placeholder: '请选择客户类型',
      options: CustomerTypeOptions,
      filterable: true
    }
  }
]
</script>
